<html lang="en">
<head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script>
        window.addEventListener('load', function() {

            const graphDiv = document.getElementById('graph')

            const url = "http://192.168.2.16:6565/datum";
            const myrequest = new XMLHttpRequest();
            myrequest.open("GET", url, true);

            myrequest.onload = (function() {
                if (this.status === 200) {

                    // only one sensor right now, so [0] to get the first one
                    const datum = JSON.parse(myrequest.responseText)[0];

                    Plotly.newPlot(graphDiv, [{
                        x: datum["datum"].map(datum => datum["timestamp"]),
                        y: datum["datum"].map(datum => datum["value"]) }], {
                        margin: { t: 0 } } );
                }
            });

            myrequest.send();

            setInterval(function() {

                const url = "http://192.168.2.16:6565/datum";
                const myrequest = new XMLHttpRequest();
                myrequest.open("GET", url, true);

                myrequest.onload = (function() {
                    if (this.status === 200) {

                        // only one sensor right now, so [0] to get the first one
                        const datum = JSON.parse(myrequest.responseText)[0];

                        Plotly.extendTraces(graphDiv, {
                            x: [datum["datum"].map(datum => datum["timestamp"])],
                            y: [datum["datum"].map(datum => datum["value"])]
                        }, [0], 500)
                    }
                });

                myrequest.send();

            }, 50);

        });
    </script>
    <title>Web App</title>
<body>
<div id="graph"></div>
</body>
</html>